<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="addNewObserver">Add New Observer checkbox</button>
	<input type="checkbox" id="mainCheckBox"/>
	<div id="observersContainer"></div>
</body>
<script src="ObserverList.js"></script>
<script>
//目标是通知的发布者，它发出通知时，并不知道谁是它的观察者，可以有任意数目的观察者订阅并接收通知


window.onload=function(){

//模拟目标subject和在观察者列表上添加，删除或通知观察者
function Subject(){
	this.observers=new ObserverList();
}

Subject.prototype.AddObserver=function(observer){
	this.observers.Add(observer);
};

Subject.prototype.RemoveObserver=function(observer){
	this.observers.RemoveIndexAt(this.observers.IndexOf(observer,0));
};

Subject.prototype.Notify=function(context){
	var observerCount=this.observers.Count();
	for(var i=0;i<observerCount;i++){
		this.observers.Get(i).Update(context);
	}
};

function Observer(){
	this.Update=function(){

	};
}

var controlCheckBox=document.getElementById('mainCheckBox');
var addBtn=document.getElementById('addNewObserver');
var container=document.getElementById('observersContainer');

//利用subject扩展controlCheckBox
extend(new Subject(),controlCheckBox);

//点击checkbox会触发通知到观察者上
controlCheckBox.onclick=function(){
	controlCheckBox.Notify(controlCheckBox.checked);
};

addBtn.onclick=AddNewObserver;
function AddNewObserver(){
	var check=document.createElement('input');
	check.type='checkbox';

	extend(new Observer(),check);

	check.Update=function(value){
		this.checked=value;
	};

	controlCheckBox.AddObserver(check);

	container.appendChild(check);
}

	
};



</script>
</html>